<template>
  <el-card class="container">
    <el-table
      v-loading="loading"
      :data="skuList"
      border
      class="container-table"
    >
      <el-table-column label="序号" width="50" type="index" align="center" />
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img
            :src="row.skuDefaultImg"
            :alt="row.skuName"
            style="width: 100px; height: 100px"
          >
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" />
      <el-table-column prop="price" label="价格(元)" />
      <el-table-column label="操作" width="300">
        <template v-slot="{ row }">
          <!-- isSale 1: 上架  2: 下架 -->
          <el-button
            :type="row.isSale ? 'info' : 'success'"
            :icon="`el-icon-${row.isSale ? 'bottom' : 'top'}`"
            size="mini"
          >
            {{ row.isSale ? '下架' : '上架' }}
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="showUpdateSku(row)"
          >
            修改
          </el-button>
          <el-tooltip effect="dark" content="删除SKU" placement="top">
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              :title="`确定删除 ${row.skuName} 吗?`"
              @onConfirm="deleteSkuAttr(row.id)"
            >
              <el-button
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                class="icon-delete"
              >
                删除
              </el-button>
            </el-popconfirm>
          </el-tooltip>
          <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSkuAttr(row.id)">
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { reqDeleteSkuList } from '@/api/product/sku'

export default {
  name: 'Sku',
  data() {
    return {
      skuList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getSkuList(this.currentPage, this.pageSize)
  },
  methods: {
    async getSkuList(currentPage, pageSize) {
      const { data } = await this.$API.sku.reqGetSkuList(currentPage, pageSize)
      this.skuList = data.records
      this.total = data.total
    },
    // 每页显示条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSkuList(this.currentPage, pageSize)
    },
    // 当前页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSkuList(currentPage, this.pageSize)
    },
    // 删除sku列表数据
    async deleteSkuAttr(id) {
      await reqDeleteSkuList(id)
      this.$message({
        type: 'success',
        message: '删除成功~'
      })
      this.getSkuList(this.currentPage, this.pageSize)
    },
    showUpdateSku(row) {
      this.$emit('setAttr', row)
      // 为了显示SaveAttr组件
      this.$emit('setIsShowSkuList', false)
    }
  }
}
</script>

<style lang="sass" scoped>
.icon-delete
  margin-left: 10px
</style>
